<template>
    <div class="roles">
        <el-row>
            <el-col :span="12">
                <!-- <el-button type="primary" @click="onUser(0)">选择项目人员</el-button> -->
                <el-link type="primary" @click="onEdit(0)">新增</el-link>
                <el-link @click="printElement">打印</el-link>
            </el-col>
        </el-row>
        <h1 class="text-center " style="font-size: 2rem;color:#000" >工程项目施工管理人员名单</h1>
        <el-table border :data="headData" class="no-header-table" v-loading="form.loading" style="width: 100%;height: auto !important;margin:0px">
            <el-table-column width="170">
                <template #default>
                    <div class="cell-item"><el-text>工程名称</el-text></div>
                </template>
            </el-table-column>
            <el-table-column >
                <template #default="scope">
                    <div class="cell-item"><el-text>{{ scope.row.title }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="120">
                <template #default>
                    <div class="cell-item"><el-text>施工单位</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="300">
                <template #default="scope">
                    <div class="cell-item"><el-text>{{ scope.row.build_unit }}</el-text></div>
                </template>
            </el-table-column>
        </el-table>

        <el-table border :data="tableData" class="no-header-table" v-loading="form.loading" style="width: 100%;font-size: 16px;margin-top: 0px;">
            <el-table-column type="index" align="center" :index="indexMethod" width="50" />
            <el-table-column width="120">
                <template #default="scope">
                    <div class="cell-item" ><el-text>{{ scope.row.role.name }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="120">
                <template #default="scope">
                    <div class="cell-item"><el-text>{{ scope.row.user.name }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="120">
                <template #default>
                    <div class="cell-item"><el-text>执业证号</el-text></div>
                </template>
            </el-table-column>
            <el-table-column >
                <template #default="scope">
                    <div class="cell-item"><el-text>{{ scope.row.cert ? scope.row.cert.numbers : '/' }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="120">
                <template #default>
                    <div class="cell-item"><el-text>联系电话</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="150">
                <template #default="scope">
                    <div class="cell-item"><el-text>{{ scope.row.user.mobile }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" width="150">
                <template #default="scope">
                    <el-link type="primary" @click="onEdit(scope.row.id)">编辑</el-link>
                    <el-popconfirm title="确定要删除么?" @confirm="onDelete(scope.row.id)">
                        <template #reference>
                            <el-link type="danger" >删除</el-link>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>
    
    <el-dialog v-model="isEdit" title="项目人员管理" width="40%">
        <component :is="userRoleProject" :data = editId @saveBind="saveBind" />
    </el-dialog>

    <el-dialog v-model="isPrint" title="打印内容" width="900px">
        <component id="print" :is="rolePrint" :type="true" />
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import userRoleProject from '@/components/staff/userRoleProject.vue';
import rolePrint from '@/components/rolePrint.vue';
// import user from './components/user.vue';
import http from '../../../../util/request';
import { ElMessage } from 'element-plus';
const indexMethod = (index: number) => {
  return index+= 1
}

const form = ref<any>({search:'',type:1,page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
const isEdit = ref<boolean>(false)
const isPrint = ref<boolean>(false)
// const isUser = ref<boolean>(false)
const editId = ref<number>(0)
const tableData = ref<any[]>([])
const headData = ref<any[]>([])
const project = ref<any>({title:'',build_unit:''})

const onGetData = () => {
    
    form.value.loading = true
    headData.value = []
    http.post('/role/user',form.value).then((response:any)=>{
        form.value.loading = false
        tableData.value = response.data.data
        project.value = response.data.project
        headData.value.push({title:project.value.title,build_unit:project.value.build_unit})
    })
}

// const onUser = (id: number) => {
//     editId.value = id
//     isUser.value = true
// }

const saveBind = () => {
    isEdit.value = false
    onGetData()
}

const onEdit = (index: number) => {
    editId.value = index
    isEdit.value = true
}

const onDelete = (id: number) => {
    http.delete('/role/user/'+id).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);return;
        }
        ElMessage.success(response.data.msg);
        onGetData();
    })
}

// const onDelete = (id: number) => {
//     http.delete('/role/'+id).then((response:any)=>{
//         if(response.data.code != 200){
//             ElMessage.error(response.data.msg);return;
//         }
//         ElMessage.success(response.data.msg);
//         onGetData();
//     })
// }


const printElement = () => {
    isPrint.value = true
}

onMounted(()=>{
    onGetData()
})

</script>

<style scoped>
.no-header-table ::v-deep .el-table__header-wrapper {
  display: none;
}
.roles{overflow-y: scroll;margin: 0px auto;}
</style>